<template>
	<view style="display:flex; flex-direction: column; flex: 1; background-color: #007AFF;">

		<web-view v-if="true" style="flex: 1; height: 100vh;" :webview-styles="webviewStyles" :src="url" @message="reciveMessage"
		 @onPostMessage="recivePostMessage"></web-view>

		<view class="page-header">
			<view class="search_box" @click="onSearchClick">
				<image class="search_icon" :src="searchIconUrl"></image>
				<text class="search_tip">请输入位号查询</text>
			</view>
			<view style="display: flex;flex-direction: row;">
				<image class="right_icon" :src="changeIconUrl" @click="onDisplayChange"></image>
				<image class="right_icon" :src="messageIconUrl" @click="onMessageClick"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				searchIconUrl: '/static/' + 'icon_search.png',
				changeIconUrl: '/static/' + 'icon_navigation_switch.png',
				messageIconUrl: '/static/' + 'icon_navigation_news.png',
				url: '',
				scrollTop: 0,
				webviewStyles: {
					progress: {
						color: 'red'
					}
				},

				// from old start
				keyword: "",
				page: 1,
				linit: 10,
				warnInfo: [],
				notifyInfo: [],
				socket: null,
				isShow: false,
				isShowProperty: false,
				showInput: true,
				// isShowBlackScreen: true,
				factoryDate: 0,
				cityArea: "",
				weather: "",
				tem: "",
				isFromAppear: false,
				// from old end
			}
		},

		props: {
			customSearch: {
				type: Boolean,
				default: () => {
					return false;
				},
			},
			pagee: {
				type: Number,
				default: () => {
					return 1;
				},
			},
			placeholder: {
				type: String,
				default: () => {
					return "搜索位号";
				},
			},
		},

		watch: {
			pagee(v) {
				this.page = v;
			},
		},

		computed: {
			...mapState(["userInfo", "activeMenu"]),

			comBlackScreen() {
				if (
					JSON.stringify(this.$route.query) == "{}" &&
					this.activeMenu == "home"
				) {
					return true;
				} else {
					return false;
				}
			},
			comSrc() {
				let token = localStorage.token;
				let userId = this.loginUser.IdentityId;
				let path = `${window.R_config.ECM_URL}/ImageType/GetUserAvatar?token=${token}&userId=${userId}`;
				return path;
			},
			comdot() {
				return this.notifyInfo.length > 0 || this.warnInfo.length > 0;
			},
		},

		mounted() {
			this.url = "/hybrid/html/index.html";
		},

		onLoad() {
			// this.url = "http://www.baidu.com";
			// this.url = "/hybrid/html/index.html";

			// console.log("index nvue ResetAllElement")
			// window.ResetAllElement();
			// window.RemoveMarker("devTag");

		},

		methods: {
			onMessageClick() {
				// uni.navigateTo({
				// 	url: "/pages/message/index"
				// })
				// debugger
				console.log(document.vueTestParam)
			},
			onPageJump(e) {
				uni.navigateTo({
					url: e
				})
			},

			onSearchClick() {
				uni.navigateTo({
					url: "/pages/index/searchPosition"
				})
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},

		reciveMessage(e) {
			console.log("index.nvue reciveMessage")
			console.log(e)
		},

		recivePostMessage(e) {
			console.log("index.nvue recivePostMessage")
			console.log(e)
		},

		getMessage(e) {
			console.log("index.nvue recivePostMessage")
			console.log(e)
		},
	}
</script>

<style lang='scss'>
	.page-header {
		position: absolute;
		right: 0;
		left: 0;
		background-color: rgba(255, 0, 0, 0.1);
		top: 0;

		/* #ifdef APP-PLUS */
		padding: 110upx 0upx 20upx 0;
		/* #endif */
		/* #ifndef APP-PLUS */
		padding: 20upx 0upx 20upx 0;
		/* #endif */


		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex: 1;
		z-index: 100
	}

	.search_box {
		width: 540upx;
		height: 64upx;
		background-color: rgba(255, 255, 255, 1);
		/* box-shadow: 0px 2px 4px 0px rgba(0, 22, 65, 0.15); */
		border-radius: 16px;
		/* filter: blur(0px); */

		padding-left: 30upx;
		margin-left: 32upx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.search_tip {
		/* width: 50vw; */
		font-size: 24upx;
		color: #8191B1;
		line-height: 34upx;
	}

	.search_icon {
		width: 40upx;
		height: 40upx;
	}

	.right_icon {
		width: 64upx;
		height: 64upx;
		padding: 15upx;
		border-radius: 25px;
		/* border: 1px solid rgba(255, 255, 255, 1.0); */
		margin-right: 20upx;
		background-color: #FFFFFF;
	}










	#viewer {
		position: absolute;
		border: 0px;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		z-index: -1;
		/* overflow: scroll; */
	}
</style>
